import React from "react";

// 当插槽里面传入多个内容的时候，那么props.children就会变成一个数组
// 如果有多个内容要传，最好使用对象的方式(类似于vue的具名插槽)
const Child = (props) => {
  console.log(props);
  return (
    <div className="child">
      {props.children.icon}
      {props.children.content1}
      <div>这是child子组件</div>
      {props.children.content2}
      {props.children.fn(123)}
    </div>
  );
};

const App = () => {
  return (
    <>
      <h2>具名插槽</h2>
      <Child>
        {/* <p>插槽内容1</p>
        <p>插槽内容2</p> */}

        {{
          content1: <p>插槽内容1</p>,
          content2: <p>插槽内容2</p>,
          icon: <span>🏀</span>,
          fn(v) {
            return <div>abc - {v}</div>;
          },
        }}
      </Child>
    </>
  );
};

export default App;
